<template>
    <div class="technology">
        <div class="technology-name">
            {{ $t('technologyName') }}
        </div>
        <div class="technology-brief">
            {{ $t('technologyBrief') }}
        </div>
        <div class="technology-product" data-aos="fade-up"  data-aos-once='true'>
            <div class="technology-product-list">
                <div class="product-item" >
                    <div class="product-itemL">
                        <h1>{{ $t('technologyItem1Name') }}</h1>
                        <h2>{{ $t('technologyItem1Brief') }}</h2>
                        <div class="line"></div>
                        <p>{{ $t('technologyItem1Desc') }}</p>
                    </div>
                    <div class="product-itemR">
                        <img src="@/assets/img/technology1.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="technology-product" data-aos="fade-up"  data-aos-once='true'>
            <div class="technology-product-list">
                <div class="product-item" >
                    <div class="product-itemR">
                        <img src="@/assets/img/technology4.png" alt="" />
                    </div>
                    <div class="product-itemL">
                        <h1>{{ $t('technologyItem2Name') }}</h1>
                        <h2>{{ $t('technologyItem2Brief') }}</h2>
                        <div class="line"></div>
                        <p>{{ $t('technologyItem2Desc') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="much-product" data-aos="fade-up"  data-aos-once='true'>
            <div class="title">
                {{ $t('technologyMore') }}
            </div>
            <div class="product-list swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide prodcut-item" v-for="(v,i) in hotList" :key="i" @click="routerProduct(v.id,v)">
                        <div class="item-l">
                            <h1>{{ $i18n.locale=='zh'?v.series_name:v.series_name_en }}</h1>
                            <p>{{ $i18n.locale=='zh'?v.desc:v.desc_en }}</p>
                            <div class="next">
                                <img src="@/assets/img/youjiantou.png" alt="" />
                            </div>
                        </div>
                        <div class="item-r">
                            <img :src="v.icon" alt="" />
                        </div>
                    </div>
                </div>
                <div class="page">
                    <div class="page-pre" :class="[swiperIndex>0?'pageActive':'']" @click="changePre1">
                        ←
                    </div>
                    <div class="page-next" :class="[swiperIndex+3<hotList.length?'pageActive':'']" @click="changeNext1">
                        →
                    </div>
                </div>
            </div>
        </div>
        <div class="serve" data-aos="fade-up"  data-aos-once='true'>
            <div class="serve-bg">
                <img src="@/assets/img/serve-bg.png" alt="">
            </div>
            <div class="serve-content">
                <div class="serve-l">
                    <img src="@/assets/img/logo.png" alt="" />
                </div>
                <div class="serve-r">
                    <h1>{{ $t('indexServeTitle') }}</h1>
                    <p>ShenZhen YANGWANG Technology company</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import API from '@/utils/request.js';
import AOS from "aos";
export default {
    name:"aboutUs",
    data(){
        return{
            swiperIndex:0,
            hotList:[],
        }
    },
    mounted() {
        let that = this;
        this.getHot();
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
    },
    methods:{
        getHot(){
            let that = this;
            API.hotSeries().then(res=>{
                if(res.code==200){
                  this.hotList = res.data;
                  this.swipers = new Swiper('.product-list', {
                    slidesPerView: 3,
                    spaceBetween: 0,
                    init:true,
                    on:{
                        slideChangeTransitionEnd:function(){
                            that.swiperIndex = this.realIndex;
                        }
                    }
                    });
                }
            })
        },
        routerProduct(id,n){
          let name = {zh:v.series_name,en:v.series_name_en};
          sessionStorage.setItem("productName",JSON.stringify(name))
          this.$router.push({path:'/product',query:{id:id}})
        },
        changePre1(){
            if(this.swiperIndex+3<=3) return false;
            this.swipers.slidePrev()
        },
        changeNext1(){
            if(this.swiperIndex+3>=this.hotList.length) return false;
            this.swipers.slideNext()
        },
    }
}
</script>
<style lang="scss"  >
.index .commonHeader .headercontain{
    background: #273443;
}
.technology{
    &-name{
        width: 1200px;
        margin: 247px auto 52px;
        font-size: 70px;
        line-height: 101px;
        font-weight: bold;
        color: #273443;
    }
    &-brief{
        font-size: 34px;
        color:#273443;
        opacity: .5;
        line-height: 61px;
        width: 1200px;
        margin: 0 auto 84px;
    }
    .technology-product{
        width: 100%;
        height: 740px;
        background:url('../../assets/img/technology_bg.png') no-repeat;
        background-size: 100% 100%;
        &-list{
            width: 1200px;
            margin: 0 auto;
            .product-item{
                width: 100%;
                white-space: nowrap;
                &L{
                    display: inline-block;
                    width: 621px;
                    h1{
                        font-size: 42px;
                        line-height: 76px;
                        color: #273443;
                        margin-top: 89px;
                    }
                    h2{
                        font-weight: normal;
                        font-size: 42px;
                        line-height: 76px;
                        color: #273443;
                    }
                    .line{
                        width: 100px;
                        height: 9px;
                        background: #E15100;
                        margin: 68px 0 41px;
                    }
                    p{
                        font-size: 30px;
                        color: #273443;
                        line-height: 54px;
                        opacity: .5;
                        white-space: pre-wrap;
                        @include textOF(6);
                    }
                }
                &R{
                    display: inline-block;
                    margin-top: 187px;
                    width: 572px;
                    height: 429px;
                    margin-left: 77px;
                }
            }
            
        } 
    }
    .technology-product:nth-child(2n){
        background:url('../../assets/img/technology2.png') no-repeat;
        .product-item{
            .product-itemR{
                width: 666px;
                margin-top: 122px;
                vertical-align: top;
                margin-left: 0;
            }
            .product-itemL{
                margin-right: 29px;
                h1{
                    margin-top: 122px;
                }
            }
        }
    }
    .much-product{
        width: 1352.9px;
        position: relative;
        margin:0 auto 165.91px;
        overflow-x: hidden;
        .title{
            font-size: 50px;
            line-height: 90px;
            text-align: center;
            margin: 111px  auto 62px;
        }
        .product-list{
            width: 100%;
            margin: 0 auto;
            white-space: nowrap;
            // overflow: hidden;
            position: relative;
            .prodcut-item{
                @include display(center,between);
                height: 173.45px;
                padding:0 34.69px 0 24.57px;
                box-sizing: border-box;
                border-right: 1px solid #273443;
                .item-l{
                    h1{
                        font-size: 32px;
                        color: #273443;
                        line-height: 46px;
                    }
                    p{
                        font-size: 28px;
                        color: #273443;
                        opacity: .5;
                        line-height: 50px;
                        margin: 7.36px 0 30px;
                        @include textWS;
                    }
                    .next{
                        width: 53.48px;
                    }
                }
                .item-r{
                    width: 189.35px;
                    position: relative;
                    height: 100%;
                    background: url('../../assets//img/technology5.png') no-repeat;
                    background-size: 100% 100%;
                    img{
                        position: absolute;
                        top:0;
                        left: 18.07px;
                        width: 155.38px;
                    }
                }
            }
            .prodcut-item:first-child{
                border-left: 1px solid #273443;
            }
            .page{
                position: absolute;
                right: 106.24px;
                top: -88.9px;
                @include display(center,left);
                div{
                    width: 43.36px;
                    height: 43.36px;
                    border: 1px solid #E15100;
                    background: #fff;
                    @include display(center,center);
                    color: #E15100;
                    font-size: 16px;
                    cursor: pointer;
                }
                .page-next{
                    margin-left: 23.13px;
                }
                .pageActive{
                    background: #E15100;
                    color: #fff;
                }
            }
        }
    }
}

</style>